import React, { useState, useEffect } from 'react';
import { UserOutlined, LaptopOutlined } from '@ant-design/icons'; // 添加 LaptopOutlined 导入
import { Layout, Card, Table, Alert, Typography, Button } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import SideMenu from '../components/SideMenu';  // 已正确引入公共菜单组件

const { Header, Content, Sider } = Layout;
const { Title } = Typography;

const ZijinXianZhi = () => {
    const [sellerData] = useState({ storeName: 'FENGDEKUN' });
    // 修改1：初始化 activeMenuKey 为资金限制对应的菜单项 key '13'
    const [activeMenuKey, setActiveMenuKey] = useState('13');
    const location = useLocation();

    // 修改2：监听资金限制路由 '/fund-limit'，同步菜单高亮
    useEffect(() => {
        if (location.pathname === '/fund-limit') {
            setActiveMenuKey('13');
        }
    }, [location]);

    const handleMenuItemClick = (e) => {
        setActiveMenuKey(e.key);
    };

    const columns = [
        { title: '限制原因', dataIndex: 'reason', key: 'reason' },
        { title: '当前限制金额(CNY)', dataIndex: 'amount', key: 'amount' },
        { title: '限制金额说明', dataIndex: 'description', key: 'description' },
        { title: '操作', dataIndex: 'action', key: 'action' },
    ];

    const data = [
        {
            reason: 'EPR商品环保费',
            amount: '¥0.62',
            description: '根据《狗多商家协议》《生产者延伸责任相关服务条款》及/或其他狗多商家规则等规定，您的账户已被限制提现，限制金额为对应的待扣除EPR商品环保费部分。',
            action: <Button type="link">查看详情</Button>,
        },
    ];

    const menuItems = [
        { key: 'sub1', label: <span><UserOutlined />首页</span>, children: [] },
        {
            key: 'sub5',
            label: <span><LaptopOutlined />结算管理</span>,
            children: [
                { key: '11', label: <Link to="/fund-center">资金中心</Link> },
                { key: '12', label: <Link to="/reconciliation-center">对账中心</Link> },
                { key: '13', label: '资金限制' },
                { key: '14', label: '结算数据' },
            ],
        },
    ];

    return (
        <Layout>
            <Sider width={200} style={{ background: '#fff' }}>
                <SideMenu 
                    activeMenuKey={activeMenuKey} 
                    onMenuItemClick={handleMenuItemClick}  // 传递点击事件处理器
                />
                <div style={{ position: 'absolute', bottom: 10, width: '180px' }}>
                    <Button type="primary" block style={{ backgroundColor: '#ff6600', color: 'white', border: 'none' }}>
                        卖家中心
                    </Button>
                </div>
            </Sider>

            <Layout>
                <Header style={{ background: '#fff', padding: 0 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '64px' }}>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Title level={5} style={{ color: '#ff6600', fontWeight: 'bold', marginRight: '10px' }}>DUK</Title>
                            <Title level={5} style={{ color: '#666' }}>跨境卖家</Title>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Card style={{ background: '#ff6600', color: 'white', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                Seller Central
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                运营对接
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px', marginRight: '10px' }}>
                                反馈
                            </Card>
                            <Card style={{ background: '#fff', color: '#666', borderRadius: '4px', padding: '5px 10px' }}>
                                {sellerData.storeName}
                            </Card>
                        </div>
                    </div>
                </Header>

                <Content style={{ padding: '0 50px' }}>
                    <Alert
                        message="为保障交易安全及消费者权益，店铺交易结算后的资金可能会因为以下原因受到限制："
                        description={
                            <ul>
                                <li>系统可能根据相关规则对存在交易争议或售后问题的订单金额进行限制直至交易争议和售后完成；</li>
                                <li>系统检测到贵店铺订单的下单等状态异常，存在交易风险，需进行排查；</li>
                                <li>贵店铺可能存在损害消费者权益的违规行为，需进行排查；</li>
                                <li>限制金额为各项限制记录的综合，若您的货款余额少于限制金额，您的全部货款暂时无法提现。</li>
                            </ul>
                        }
                        type="warning"
                        showIcon
                    />

                    <Title level={4}>限制记录</Title>
                    <Table columns={columns} dataSource={data} rowKey="id" bordered />
                </Content>
            </Layout>
        </Layout>
    );
};

export default ZijinXianZhi;